<script setup>
import { ref, reactive, toRaw } from 'vue';
import { service } from '@utils';
import { ElMessage } from 'element-plus';

const emit = defineEmits(['refresh']);

const props = defineProps({
    status: Array,
});

const visible = ref(false);
const formRef = ref();
const title = ref('');
const state = reactive({
    param: {},
    channelData: [],
});

const rules = {
    channel: [{ required: true, message: '请选择', trigger: 'blur' }],
    endpoint: [{ required: true, message: '请输入', trigger: 'blur' }],
    accessKeyId: [{ required: true, message: '请输入', trigger: 'blur' }],
    accessKeySecret: [{ required: true, message: '请输入', trigger: 'blur' }],
    region: [{ required: true, message: '请输入', trigger: 'blur' }],
    uploadDirectory: [{ required: true, message: '请输入', trigger: 'blur' }],
    bucketName: [{ required: true, message: '请输入', trigger: 'blur' }],
};

const open = async (type, item) => {
    title.value = type;
    state.param = JSON.parse(JSON.stringify(item));
    state.channelData = props.status;
    visible.value = true;
};

const close = () => {
    visible.value = false;
    state.param = {};
};

const sure = async () => {
    formRef.value.validate(valid => {
        if (valid) {
            realSubmit();
        }
    });
};
const realSubmit = async () => {
    let res;
    if (title.value == '新增') {
        res = await service.sys.ossConfigAdd(toRaw(state.param));
    } else if (title.value == '编辑') {
        res = await service.sys.ossConfigEdit(toRaw(state.param));
    }
    if (res) {
        ElMessage.success(title.value + '成功');
        close();
        emit('refresh', !!state.param.id);
    }
};
//把方法暴露给父组件
defineExpose({
    open,
});
</script>

<template>
    <el-dialog v-model="visible" :title="title" center :close-on-click-modal="false" @close="close" destroy-on-close top="10vh">
        <section>
            <el-form :model="state.param" :rules="rules" ref="formRef" label-width="100px" label-suffix=":" onsubmit="return false;">
                <div>
                    <el-form-item label="对接渠道" prop="channel">
                        <!-- <el-input v-model="state.param.channel" placeholder="请输入对接渠道" clearable></el-input> -->
                        <el-select v-model="state.param.channel" style="width: 100%" placeholder="请选择对接渠道">
                            <el-option v-for="item in state.channelData" :value="item.value * 1" :key="item.value" :label="item.label" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="访问域名" prop="endpoint">
                        <el-input v-model="state.param.endpoint" placeholder="请输入访问域名" clearable></el-input>
                    </el-form-item>
                    <el-form-item label="桶名" prop="bucketName">
                        <el-input v-model="state.param.bucketName" placeholder="请输入访问域名" clearable></el-input>
                    </el-form-item>
                    <el-form-item label="顾客编码" prop="accessKeyId">
                        <el-input v-model="state.param.accessKeyId" placeholder="请输入顾客编码" clearable></el-input>
                    </el-form-item>
                    <el-form-item label="校验码" prop="accessKeySecret">
                        <el-input v-model="state.param.accessKeySecret" placeholder="请输入校验码" clearable></el-input>
                    </el-form-item>
                    <el-form-item label="城市名" prop="region">
                        <el-input v-model="state.param.region" placeholder="请输入城市名" clearable></el-input>
                    </el-form-item>
                    <el-form-item label="上传目录" prop="uploadDirectory">
                        <el-input v-model="state.param.uploadDirectory" placeholder="请输入上传目录" clearable></el-input>
                    </el-form-item>
                </div>
            </el-form>
        </section>

        <template #footer>
            <span class="flex-align-end">
                <div class="margin-right20">
                    <el-button @click="close">取消</el-button>
                </div>
                <el-button type="primary" @click="sure">确定</el-button>
            </span>
        </template>
    </el-dialog>
</template>
